<!DOCTYPE html>
<html>
<head>
<title>OSM Buildings - each()</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#map {
  height: 100%;
}
</style>
<link rel="stylesheet" href="leaflet-0.7/leaflet.css">
<script src="leaflet-0.7/leaflet-src.js"></script>
<script src="loader.js"></script>
</head>

<body>
<div id="map"></div>
<script>
var map = new L.Map('map').setView([11.24435, 125.00327], 17); // Philippines
new L.TileLayer('http://{s}.tile.stamen.com/toner-lite/{z}/{x}/{y}.png', {
  maxNativeZoom: 19,
  maxZoom: 21
}).addTo(map);


var osmb = new OSMBuildings(map)
  .each(function(feature) {
    var state = feature.tags.building;
    if (state === 'collapsed') {
      feature.tags['building:color'] = 'red';
      feature.tags['roof:color'] = 'red';
      feature.tags['height'] = 35; // increase height otherwise OSMB won't add perspective'
    } else if (state === 'damaged') {
      feature.tags['building:color'] = 'rgb(255, 140, 0)';
      feature.tags['roof:color'] = 'rgb(255, 140, 0)';
      feature.tags['height'] = 35; // increase height otherwise OSMB won't add perspective'
    } else {
      feature.tags['building:color'] = 'grey';
      feature.tags['roof:color'] = 'grey';
      feature.tags['height'] = 60; // add more height for untouched buildings
    }
  })
  .load();
</script>
</body>
</html>